<template>
  <div class="agent frame_content m10" style="margin-bottom: 40px">
    <div>
      <a href="javascript:void(0);" @click="Addone(only)">添加代理</a>
      <!--<span>|</span>-->
      <!--<a href="javascript:void(0);" @click="memberone(only)">会员</a>-->
    </div>
    <table class="common cent agentTable">
      <thead>
        <tr>
          <th>账号</th>
          <th>代理深度</th>
          <th>房间总数量</th>
          <th>可用房间数量</th>
          <th>在用房间数量</th>
          <!--<th>总流水</th>-->
          <!--<th>总余额</th>-->
          <th>到期时间</th>
          <th>添加</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(list,index) in lists" :key="index">
          <td>{{list.nickname}}（{{list.account_id}}）</td>
          <td>{{list.agent_level}}</td>
          <td>{{list.all_room}}</td>
          <td>{{list.all_room-list.use_room}}</td>
          <td>{{list.use_room}}</td>
          <!--<td>{{list.stream}}</td>-->
          <!--<td>{{list.balance}}</td>-->
          <td>{{list.expiry_time | formatDate}}</td>
          <td>
            <a href="javascript:void(0);" @click="Add(list.account_id)">代理</a>
            <span>|</span>
            <a href="javascript:void(0);" @click="member(list.account_id)">会员</a>
          </td>
          <td>
            <a href="javascript:void(0);" @click="revision(list)">调整</a>
            <!-- <span>|</span>
            <input type="radio" name="series" />
            启用
            <input type="radio" name="series" />
            禁用 -->
          </td>
        </tr>
      </tbody>

    </table>
    <div v-if="show">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          @current-change="currChange"
          layout="prev, pager, next"
          :page-size="per_page"
          :total="total">
        </el-pagination>
      </div>
    <!-- 添加代理 -->
    <div ref="mode6" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >添加代理</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>账号</td>
                    <td>
                      <input type="text" v-model="addid" />
                    </td>
                    <td>密码</td>
                    <td>
                      <input type="text" v-model="Addpaw" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px">房间数量</td>
                    <td>
                      <input type="text" v-model="addroom" />
                    </td>
                    <td style="width:80px">到期时间</td>
                    <td>
                      <div class="block">
                        <el-date-picker
                          v-model="proxy_value"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="timestamp">
                        </el-date-picker>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="proxy_btn()"
                        class="btn sendBtn"
                      >提交保存1</a>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode6" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 添加会员 -->
    <div ref="mode7" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >添加会员</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>账号</td>
                    <td>
                      <input type="text" v-model="addid" />
                    </td>
                    <td>密码</td>
                    <td>
                      <input type="text" v-model="Addpaw" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px">房间号</td>
                    <td>
                      <input type="text" v-model="addroom" />
                    </td>
                    <td style="width:80px">到期时间</td>
                    <td>
                      <div class="block">
                        <el-date-picker
                          v-model="value2"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="timestamp">
                        </el-date-picker>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="changeBackWater(lists.account_id)"
                        class="btn sendBtn"
                      >提交保存M</a>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode7" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 调整 -->
    <div ref="mode3" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >调整</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>用户名id</td>
                    <td>
                      <input type="text" v-model="id"  readonly="readonly" />
                    </td>
                    <td>用户名称</td>
                    <td>
                      <input type="text" v-model="user" readonly="readonly" />
                    </td>
                  </tr>
                  <tr>
                    <td>密码</td>
                    <td>
                      <input type="text" v-model="paw" />
                    </td>
                    <td style="width:80px">房间数量</td>
                    <td>
                      <input type="text" v-model="room" />
                    </td>
                  </tr>
                  <tr>

                    <td style="width:80px">到期时间</td>
                    <td>
                        <div class="block">
                          <el-date-picker
                            v-model="Adjustment"
                            type="date"
                            placeholder="选择日期2"
                            format="yyyy-MM-dd"
                            value-format="timestamp">>
                          </el-date-picker>
                        </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="regulation()"
                        class="btn sendBtn"
                      >提交保存</a>
                    </td>
                  </tr>
                  <tr>
                    <td>禁用彩种</td>
                    <td colspan="3">
                      <a style="color:white;text-decoration:none;margin:5px"
                        v-for="(color,index) in colors" :key="index"
                        @click="chagecolor(color,index)"
                        :class="[
                          'btn',
                          { btndanger: color.status != 1, 'btn-success': color.status == 1 }
                        ]"
                        >{{ color.lottert_name}}<span>{{ color.status == 1 ? '关闭' : '开启' }}</span></a
                      >
                    </td>
                  </tr>
                </tbody>

              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode3" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import http from "@/utils/http";
import { Toast } from "vant";
import { isArray } from 'util';
export default {
  data() {
    return {
      danger: "btndanger",
      only:"",//登录账号的ID
      pro: "",
      inputVal: "",
      accountId: "",
      room: "", //房间数量
      proxy_value:"",//代理
      value2:"",
      addid:"",
      Addpaw:"",
      addroom:"",
      Adjustment: "", //到期时间
      id:"",
      user:"",
      login:"",
      paw:"",
      colors:[],
      lists:[],
      show:false,
      total:0,//一共有多上条数据
      per_page:1,//一页显示多少条数据
      curPage:1,
      details:[],//点击详情数据
      btnlists:[]//彩种id
    };
  },
    filters: {
        formatDate: function (value) {
            let date = new Date(value*1000);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        }
    },
  computed: {
    ...mapState("agent", ["agentList", "offlineList"])
  },
  watch:{
    colors(n, o){
      console.log(n, o)
    }
  },
  methods: {
    ...mapActions("agent", ["getAgentList"]),
    //添加一级代理
    Addone(only){
      let mode6 = this.$refs.mode6;
      mode6.style.display = "block";
      this.pro = 0;
    },
    //添加一级会员
    memberone(only){
      let mode7 = this.$refs.mode7;
      mode7.style.display = "block";
      this.pro = 0;
    },
    // 添加代理
    Add(item){
      let mode6 = this.$refs.mode6;
      mode6.style.display = "block";
      this.pro = item;
    },
    // 关闭添加代理
    closemode6() {
      let mode6 = this.$refs.mode6;
      mode6.style.display = "none";
    },
    //添加会员
    member(item){
      let mode7 = this.$refs.mode7;
      mode7.style.display = "block";
      this.pro = item;
    },
    //关闭添加会员
    closemode7(){
      let mode7 = this.$refs.mode7;
      mode7.style.display = "none";
    },

    //调整
    revision(agent) {
        this.colors = agent.lottery;
      this.$nextTick(() => {
          let mode3 = this.$refs.mode3;
          mode3.style.display = "block";
          this.id=agent.account_id;
          this.user=agent.nickname;
          this.room=agent.all_room;
          this.Adjustment=agent.expiry_time*1000;
        })
    },
    // 关闭调整页面
    closemode3() {
      let mode3 = this.$refs.mode3;
      mode3.style.display = "none";
    },
    //获取代理管理员的列表数据
    proxy_list(){
      let token=sessionStorage.getItem('token');
      let page=this.curPage;
      http
        .post(
          `/api/login/agent_admin/get_list?token=${token}&page=${page}`,
        )
        .then(response => {
          console.log(response,'response36')
          this.lists=response.data.list.data;
          if(response.data.list.last_page==1){
            this.show=false
          }else{
            this.show=true;
            this.total=response.data.list.total;//一共有多少条数据
            this.per_page=response.data.list.per_page;//一个页面显示12条数据
          }
        });
    },
    //提交会员保存
    changeBackWater(){
      let token=sessionStorage.getItem('token');
      let agent_account_id=this.pro;
      let account_name=this.addid;
      let password=this.Addpaw;
      let expire_time=this.value2;
      let room_num=this.addroom;
      http
        .post(
          `/api/login/room_admin/add?token=${token}&agent_account_id=${agent_account_id}&account_name=${account_name}&password=${password}&expire_time=${expire_time}&room_num=${room_num}`,
        )
        .then(response => {
          console.log(response,'response')
        });
    },
    //页码切换
    currChange(val){
      console.log(`当前页:${val}`);
      this.curPage = val;
      this.proxy_list()
    },
    //添加代理(列表的)
    proxy_btn(){
      let token=sessionStorage.getItem('token');
      let account_id=this.pro;
      let account_name=this.addid;
      let password=this.Addpaw;
      let expiry_time=this.proxy_value/1000;
      let room_num=this.addroom;
      http
        .post(
          `/api/login/agent/add_agent?token=${token}&account_id=${account_id}&account_name=${account_name}&password=${password}&expiry_time=${expiry_time}&room_num=${room_num}`,
        )
        .then(response => {
          console.log(response,'response3');
          if(response.status===false){
          }else if(response.data.status===true){
            this.closemode6();
            this.proxy_list();this.addid="";
              this.Addpaw="";
              this.proxy_value="";
              this.addroom="";

          }
        })
        .finally(() => {

        });
    },
    //提交调整
    regulation(){
      let token=sessionStorage.getItem('token');
      let account_id=this.id;
      let expiry_time=this.Adjustment/1000;
      let room_num=this.room;
      let password=this.paw;
        http
          .post(
            `/api/login/agent_admin/edit?token=${token}&account_id=${account_id}&expiry_time=${expiry_time}&all_room=${room_num}&password=${password}`
            )
          .then(response =>{
            // console.log(response,'++++++++++++++++++++');
            this.proxy_list()
          })
    },
    chagecolor(color,index) {//彩种切换
    let token=sessionStorage.getItem('token')
    let status = this.colors[index].status;
    let account_id=this.id;
    let project_name=color.project_name;
      if (status == 1) {
        status=2;
      } else {
        status=1;
      }
      console.log(status,'statu')
      http
        .post(
          `/api/login/agent_lottery/lottery_status?token=${token}&agent_account_id=${account_id}&status=${status}&project_name=${project_name}`
        )
        .then(response => {
          this.colors[index].status = status
          console.log(response,'----------------------');
        });
    }
  },

  created() {
    this.getAgentList();
    this.proxy_list();//一进来的调用接口
    let account=JSON.parse(localStorage.getItem('account'));
    this.only=account.id;
    let token=sessionStorage.getItem('token');
    console.log(token);
    //this.getDigital();//请求页面所有数据
  }
};
</script>

<style>
.el-input{
  left: 10px !important;
}
.el-input__inner{
 height:25px !important;
 width: 180px !important;
}
.el-input__icon{
  position: relative;
  bottom: 7px;
}
table tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.agent a {
  color: #08c;
  text-decoration: none;
}
.agent a:hover,
a:focus {
  color: #005580;
  text-decoration: underline;
}
.agentTable img {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
.layerModel .wrap {
  box-sizing: border-box;
  height: 100%;
  border-top: none;
  overflow-y: auto;
  padding: 10px;
}
#model1 .sendBtn,
#model3 .cancelBtn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
#model1 .sendBtn:hover,
#model3 .cancelBtn:hover {
  text-decoration: none;
}
a:hover,
a:active {
  outline: 0;
}
#model2 .addBtn {
  width: 40px;
  height: 22px;
  border: 1px solid #9b9b9b;
  background-color: #e1e1e1;
  text-align: center;
  line-height: 22px;
  color: #333;
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  vertical-align: super;
}
#model2 .cancelBtn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
}
#model2 a {
  text-decoration: none;
}
.btn-success {
  color: rgb(255, 255, 255);
  text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px;
  background-color: rgb(91, 183, 91);
  background-image: linear-gradient(rgb(98, 196, 98), rgb(81, 163, 81));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btndanger {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #bd362f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ee5f5b),
    to(#bd362f)
  );
  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
</style>
